<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul,body{ margin:0;padding:0;}
li{list-style:none;}
img{vertical-align:top;border:none;}

#ul1{position:absolute;top:0px;left:0;}
#ul2{height:20px; position:absolute;top:140px;left:350px;}
#div1{width:490px;height:170px;overflow:hidden;margin:0 auto;border:4px solid #999;position:relative;}
#ul2 li{float:left;height:20px;width:20px;background:#FF0;color:#C03;border:1px solid #999;text-align:center;margin:0 3px;}
</style>
<script>
window.onload=function(){
	var oUl1=document.getElementById('ul1');
	var oUl2=document.getElementById('ul2');
	var aLi1=oUl1.getElementsByTagName('li');
	var aLi2=oUl2.getElementsByTagName('li');
	var imgH=170;
	
	for(var i=0;i<aLi2.length;i++){
		//alert(aLi2);
		aLi2[i].index=i;
		aLi2[i].onclick=function(){
			
			startMove(oUl1,'top',-(imgH*this.index));
		}	
	}
	
	function startMove(obj,attr,iTarget){
		clearInterval(obj.timer);
		obj.timer=setInterval(function(){
			var iCur=0;
			if(attr == 'opacity'){
				iCur = Math.round(getStyle(obj,attr)*100);
			}
			else{
				iCur = parseInt(getStyle(obj,attr));
			}
			var iSpeed=-5;
			iSpeed = iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
			document.title=oUl1.style.top;
			if(iCur==iTarget){
				clearInterval(obj.timer);
			
			}else{
				obj.style[attr]=iCur+iSpeed+'px';
			
			}
			
		
		},30);
	
	}
	
	function getStyle(obj,attr){
		if(obj.currentStyle){
			return obj.currentStyle[attr];
		}else{
			return getComputedStyle(obj,false)[attr];
		}
	}
}

</script>
</head>

<body>
<div id="div1">
	<ul id="ul1">
        <li><img src="1.png" alt=""/></li>
        <li><img src="2.jpg" alt=""/></li>
        <li><img src="3.png" alt=""/></li>
        <li><img src="4.jpg" alt=""/></li>
        <li><img src="5.jpg" alt=""/></li>
	</ul>
    <ul id="ul2">
    	<li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>


</div>

</body>
</html>
